<template>
  <view class="content" style="padding-bottom: 140px">
    <u-form
      ref="formRef"
      v-model="formData"
      :rules="rules"
      label-align="left"
      label-width="108px"
      :labelStyle="{ fontSize: '13px' }"
    >
      <!-- <view class="title">创建项目</view> -->
      <lonjin-form
        ref="lonjinForm"
        @submit="submit"
        :formData="formData"
        @updateValue="updateValue"
        @uploadPicture="uploadPicture"
        :config="config"
        :rules="rules"
        :disabled="!isEditProject"
        :showButton="false"
        @uploadMedia="uploadMedia"
      >
      </lonjin-form>
      <view
        class="shooting-form"
        v-if="!isEmptyObject(shootingInfo) || isEditPhotographer"
      >
        <view class="title">拍摄</view>
        <view class="sub-title" style="margin-top: -20px">
          <u-button
            v-if="isEditPhotographer"
            type="primary"
            color="#858685"
            text="新增拍摄任务"
            size="small"
            style="width: 100px; font-size: 12px"
            @click="addShootingConfig"
          ></u-button>
        </view>
        <view
          v-for="(shooting, shootingIndex) in shootingConfigList"
          :key="shootingIndex"
        >
          <view class="form-title" style="padding: 10px">
            拍摄任务{{ shootingIndex + 1 }}
          </view>
          <u-form-item
            label="拍摄地点"
            class="items flex-bt"
            required
            :prop="`shootingConfig${shootingIndex}_shootingAddress`"
          >
            <u--input
              v-model="
                formData[`shootingConfig${shootingIndex}_shootingAddress`]
              "
              placeholder="请输入拍摄地点"
              border="none"
              :disabled="!isEditPhotographer"
            >
            </u--input>
          </u-form-item>

          <u-form-item label="拍摄时间" required class="items flex-bt">
            <!-- <u--input
              v-model="formData[`shootingConfig${shootingIndex}_shootingTime`]"
              placeholder="请输入拍摄时间"
              border="none"
              :disabled="!isEditPhotographer"
            >
            </u--input> -->
            <picker
              start="2000-03-01"
              end="2100-04-01"
              :fields="'day'"
              @change="dateChange"
              :mode="'date'"
              :data-key="`shootingConfig${shootingIndex}_shootingTime`"
              :value="formData[`shootingConfig${shootingIndex}_shootingTime`]"
              :disabled="!isEditPhotographer"
            >
              <view
                class="uni-input"
                :class="[
                  formData[`shootingConfig${shootingIndex}_shootingTime`]
                    ? ''
                    : 'placeholder',
                ]"
              >
                {{
                  formData[`shootingConfig${shootingIndex}_shootingTime`]
                    ? formData[`shootingConfig${shootingIndex}_shootingTime`]
                    : "请输入拍摄时间"
                }}
              </view>
            </picker>
          </u-form-item>
          <view class="divider"></view>
          <view
            class="shooter-base-form"
            v-for="(item, index) in shooting.shootingProject"
            :key="index"
          >
            <u-form-item
              v-for="(val, j) in shootingProject"
              :label="val.label"
              class="items flex-bt"
              :key="`shootingConfig${shootingIndex}_shootingProject${j}`"
              required
            >
              <template v-if="val.type === 'input'">
                <u--input
                  v-model="
                    formData[
                      `shootingConfig${shootingIndex}_shootingProject_${val.key}${index}`
                    ]
                  "
                  :placeholder="val.placeholder"
                  border="none"
                  :disabled="!isEditPhotographer"
                >
                </u--input>
              </template>
              <template v-if="val.type === 'picker'">
                <picker
                  @change="pickerChange"
                  range-key="label"
                  :data-options="val.options"
                  :data-key="`shootingConfig${shootingIndex}_shootingProject_${val.key}${index}`"
                  :range="val.options"
                  :immediateChange="true"
                  :value="
                    findIndex(
                      val.options,
                      `shootingConfig${shootingIndex}_shootingProject_${val.key}${index}`
                    )
                  "
                  :disabled="!isEditPhotographer"
                >
                  <view
                    class="uni-input"
                    :class="[
                      getLabel(
                        val.options,
                        `shootingConfig${shootingIndex}_shootingProject_${val.key}${index}`
                      )
                        ? ''
                        : 'placeholder',
                    ]"
                  >
                    {{
                      getLabel(
                        val.options,
                        `shootingConfig${shootingIndex}_shootingProject_${val.key}${index}`
                      )
                        ? getLabel(
                            val.options,
                            `shootingConfig${shootingIndex}_shootingProject_${val.key}${index}`
                          )
                        : val.placeholder
                    }}
                  </view>
                </picker>
              </template>
            </u-form-item>
            <view class="divider"></view>
          </view>
          <view
            class="add-button"
            @click="
              addModule('shootingConfigList', 'shootingProject', shootingIndex)
            "
            v-if="isEditPhotographer"
          >
            <u-icon name="plus-circle-fill" class="arrow-right"> </u-icon>
            新增拍摄项目
          </view>
          <view
            class="shooter-base-form"
            v-for="(item, index) in shooting.equipmentProject"
            :key="`shootingConfig${shootingIndex}_equipmentProject${index}`"
          >
            <u-form-item
              v-for="(val, j) in equipmentProject"
              :label="val.label"
              class="items flex-bt"
              :key="j"
              required
            >
              <template v-if="val.type === 'input'">
                <u--input
                  v-model="
                    formData[
                      `shootingConfig${shootingIndex}_equipmentProject_${val.key}${index}`
                    ]
                  "
                  :placeholder="val.placeholder"
                  border="none"
                  :disabled="!isEditPhotographer"
                >
                </u--input>
              </template>
              <template v-if="val.type === 'picker'">
                <picker
                  @change="pickerChange"
                  range-key="label"
                  :data-options="val.options"
                  :data-key="`shootingConfig${shootingIndex}_equipmentProject_${val.key}${index}`"
                  :range="val.options"
                  :immediateChange="true"
                  :value="
                    findIndex(
                      val.options,
                      `shootingConfig${shootingIndex}_equipmentProject_${val.key}${index}`
                    )
                  "
                  :disabled="!isEditPhotographer"
                >
                  <view
                    class="uni-input"
                    :class="[
                      getLabel(
                        val.options,
                        `shootingConfig${shootingIndex}_equipmentProject_${val.key}${index}`
                      )
                        ? ''
                        : 'placeholder',
                    ]"
                  >
                    {{
                      getLabel(
                        val.options,
                        `shootingConfig${shootingIndex}_equipmentProject_${val.key}${index}`
                      )
                        ? getLabel(
                            val.options,
                            `shootingConfig${shootingIndex}_equipmentProject_${val.key}${index}`
                          )
                        : val.placeholder
                    }}
                  </view>
                </picker>
              </template>
            </u-form-item>
            <view class="divider"></view>
          </view>
          <view
            class="add-button"
            @click="
              addModule('shootingConfigList', 'equipmentProject', shootingIndex)
            "
            v-if="isEditPhotographer"
          >
            <u-icon name="plus-circle-fill" class="arrow-right"> </u-icon>
            新增设备项目
          </view>

          <u-form-item required label="交通运输费价" class="items flex-bt">
            <u--input
              v-model="formData[`shootingConfig${shootingIndex}_carFare`]"
              placeholder="请输入交通运输费价"
              border="none"
              :disabled="!isEditPhotographer"
            >
            </u--input>
          </u-form-item>
          <u-form-item required label="餐费" class="items flex-bt">
            <u--input
              v-model="formData[`shootingConfig${shootingIndex}_mealFee`]"
              placeholder="请输入餐费"
              border="none"
              :disabled="!isEditPhotographer"
            >
            </u--input>
          </u-form-item>
          <view class="divider"></view>
          <u-form-item required label="成本小计" class="items flex-bt">
            <u--input
              v-model="formData[`shootingConfig${shootingIndex}_costTotal`]"
              placeholder="请输入成本小计"
              border="none"
              :disabled="!isEditPhotographer"
            >
            </u--input>
          </u-form-item>
          <u-form-item required label="素材入库位置" class="items flex-bt">
            <u--input
              v-model="
                formData[`shootingConfig${shootingIndex}_materialPosition`]
              "
              placeholder="请输入素材入库位置"
              border="none"
              :disabled="!isEditPhotographer"
            >
            </u--input>
          </u-form-item>
        </view>
      </view>
      <view
        class="shooting-form"
        v-if="!isEmptyObject(postProductionInfo) || isEditPostProduction"
      >
        <view class="title">后期制作</view>
        <view
          class="shooter-base-form"
          v-for="(item, index) in postProductionConfig.projectPostProduction"
          :key="'projectPostProduction' + index"
        >
          <u-form-item
            v-for="(val, j) in projectPostProduction"
            :label="val.label"
            class="items flex-bt"
            :key="j"
            required
          >
            <u--input
              v-model="formData[`projectPostProduction_${val.key}${index}`]"
              :placeholder="val.placeholder"
              border="none"
              :disabled="!isEditPostProduction"
            >
            </u--input>
          </u-form-item>
          <view class="divider"></view>
        </view>
        <view
          class="add-button"
          v-if="isEditPostProduction"
          @click="addModule('postProductionConfig', 'projectPostProduction')"
        >
          <u-icon name="plus-circle-fill" class="arrow-right"> </u-icon>
          新增后期项目
        </view>
        <u-form-item required label="后期制作成本小计" class="items flex-bt">
          <u--input
            v-model="formData[`costSubtotal`]"
            placeholder="请输入后期制作成本小计"
            border="none"
            :disabled="!isEditPostProduction"
          >
          </u--input>
        </u-form-item>
        <view class="divider"></view>
        <view
          class="shooter-base-form"
          v-for="(item, index) in postProductionConfig.projectFilms"
          :key="index"
        >
          <u-form-item
            v-for="(val, j) in projectFilms"
            :label="val.label"
            class="items flex-bt"
            :key="j"
            required
          >
            <u--input
              v-model="formData[`projectFilms_${val.key}${index}`]"
              :placeholder="val.placeholder"
              border="none"
              :disabled="!isEditPostProduction"
            >
            </u--input>
          </u-form-item>
          <view class="divider"></view>
        </view>
        <view
          class="add-button"
          @click="addModule('postProductionConfig', 'projectFilms')"
          v-if="isEditPostProduction"
        >
          <u-icon name="plus-circle-fill" class="arrow-right"> </u-icon>
          新增成片项目
        </view>
        <u-form-item required label="成片入库位置" class="items flex-bt">
          <u--input
            v-model="formData[`filmsPosition`]"
            placeholder="请输入成片入库位置"
            border="none"
            :disabled="!isEditPostProduction"
          >
          </u--input>
        </u-form-item>
        <u-form-item required label="成片交付时间" class="items flex-bt">
          <u--input
            v-model="formData[`filmsDeliveryTime`]"
            placeholder="请输入成片交付时间"
            border="none"
            :disabled="!isEditPostProduction"
          >
          </u--input>
        </u-form-item>

        <u-form-item required label="成本合计" class="items flex-bt">
          <u--input
            v-model="formData[`costTotal`]"
            placeholder="请输入成本合计"
            border="none"
            :disabled="!isEditPostProduction"
          >
          </u--input>
        </u-form-item>
      </view>
      <view
        class="shooting-form"
        v-if="(!isEmptyObject(financeInfo) && !isGeneral) || isEditFinance"
      >
        <view class="title">财务</view>
        <u-form-item required label="实际结算金额" class="items flex-bt">
          <u--input
            v-model="formData[`settlementAmount`]"
            placeholder="请输入实际结算金额"
            border="none"
            :disabled="!isEditFinance"
          >
          </u--input>
        </u-form-item>
        <u-form-item required label="结算方式" class="items flex-bt">
          <u--input
            v-model="formData[`settlementType`]"
            placeholder="请输入结算方式"
            border="none"
            :disabled="!isEditFinance"
          >
          </u--input>
        </u-form-item>
        <u-form-item required label="是否已结算" class="items flex-bt">
          <picker
            @change="pickerChange"
            range-key="label"
            :data-options="isSettlementOptions"
            :data-key="`isSettlement`"
            :range="isSettlementOptions"
            :immediateChange="true"
            :value="findIndex(isSettlementOptions, `isSettlement`)"
            :disabled="!isEditFinance"
          >
            <view
              class="uni-input"
              :class="[
                getLabel(isSettlementOptions, `isSettlement`)
                  ? ''
                  : 'placeholder',
              ]"
            >
              {{
                getLabel(isSettlementOptions, `isSettlement`)
                  ? getLabel(isSettlementOptions, `isSettlement`)
                  : "请填写"
              }}
            </view>
          </picker>
        </u-form-item>

        <view class="divider"></view>
        <view
          class="shooter-base-form"
          v-for="(item, index) in financeConfig.invoiceInfo"
          :key="'invoiceInfo' + index"
        >
          <u-form-item
            v-for="(val, j) in invoiceInfo"
            :label="val.label"
            class="items flex-bt"
            :key="j"
            required
          >
            <u--input
              v-model="formData[`invoiceInfo_${val.key}${index}`]"
              placeholder="请填写"
              border="none"
              :disabled="!isEditFinance"
            >
            </u--input>
          </u-form-item>
          <view class="divider"></view>
        </view>
        <view
          class="add-button"
          @click="addModule('financeConfig', 'invoiceInfo')"
          v-if="isEditFinance"
        >
          <u-icon name="plus-circle-fill" class="arrow-right"> </u-icon>
          新增发票
        </view>
        <u-form-item required label="预存金额" class="items flex-bt">
          <u--input
            v-model="formData[`advanceAmount`]"
            placeholder="请输入预存金额"
            border="none"
            :disabled="!isEditFinance"
          >
          </u--input>
        </u-form-item>
        <u-form-item required label="到账金额" class="items flex-bt">
          <u--input
            v-model="formData[`receivedAmount`]"
            placeholder="请输入到账金额"
            border="none"
            :disabled="!isEditFinance"
          >
          </u--input>
        </u-form-item>
        <u-form-item required label="到账时间" class="items flex-bt">
          <u--input
            v-model="formData[`receivedTime`]"
            placeholder="请输入到账时间"
            border="none"
            :disabled="!isEditFinance"
          >
          </u--input>
        </u-form-item>

        <u-form-item required label="结算清单存放位置" class="items flex-bt">
          <u--input
            v-model="formData[`settlementListPosition`]"
            placeholder="请输入结算清单存放位置"
            border="none"
            :disabled="!isEditFinance"
          >
          </u--input>
        </u-form-item>
      </view>
      <view v-if="!isAdmin" class="fixed-bottom ios-bottom">
        <view class="content-box flex-center">
          <u-button type="primary" @click="save">保存</u-button>
        </view>
      </view>
    </u-form>
  </view>
</template>

<script>
import {
  saveProject,
  getProject,
  updateProject,
  saveProjectShooting,
  delProjectShooting,
  getProjectShooting,
  updateProjectShooting,
  getProjectPostProduction,
  getProjectFinancial,
  saveProjectFinancial,
  updateProjectPostProduction,
  saveProjectPostProduction,
  updateProjectFinancial,
  batchSaveProjectShooting,
  batchSaveProjectPostProduction,
} from "@/api/projectManager.js";

import {
  listCustomer,
  listPostProductionType,
  listShootingType,
  listEquipment,
  listExternal,
} from "@/api/typeManager.js";

import { pageWxUserInfo } from "@/api/user.js";
import { formatDateTime } from "@/common/date.js";
export default {
  data() {
    return {
      shootingForm: null,
      isAdd: true, // 是否是新增
      isEditProject: false, // 是否可以编辑项目
      isEditPhotographer: false, // 是否可以编辑摄影师
      isEditPostProduction: false, // 是否可以编辑后期
      isEditFinance: false, // 是否可以编辑财务
      isAdmin: false, // 是否是管理员
      isGeneral: false, // 是否是普通用户
      projectId: "",
      // 项目信息
      projectInfo: {},
      //拍摄信息
      shootingInfo: {},
      //后期制作信息
      postProductionInfo: {},
      //财务信息
      financeInfo: {},
      customerList: [],
      userData: [],
      formData: {
        projectName: "",
        projectCode: "",
        startDate: "",
        endDate: "",
        quotedAmount: "",
        customerId: "",
        projectType: "",
        projectNum: "",
        workload: "",
      },
      shootingFormData: {}, // 摄像formData

      postProductionFormData: {}, // 后期formData
      financeFormData: {}, // 财务formData
      rules: {
        projectName: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur",
          },
        ],
        projectCode: [
          {
            required: true,
            message: "请输入项目编号",
            trigger: "blur",
          },
        ],
        startDate: [
          {
            required: true,
            message: "请选择项目开始日期",
            trigger: "change",
          },
        ],
        endDate: [
          {
            required: true,
            message: "请选择项目结束日期",
            trigger: "change",
          },
        ],
        quotedAmount: [
          {
            required: true,
            message: "请输入报价金额",
            trigger: "blur",
          },
        ],
        customerId: [
          {
            required: true,
            message: "请选择对接人",
            trigger: "change",
          },
        ],
        projectType: [
          {
            required: true,
            message: "请输入项目类别",
            trigger: "blur",
          },
        ],
        projectNum: [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur",
          },
        ],
        workload: [
          {
            required: true,
            message: "请输入预计工作量",
            trigger: "blur",
          },
        ],
        source: [
          {
            required: true,
            message: "请输入项目来源",
            trigger: "blur",
          },
        ],
        projectRemark: [
          {
            required: true,
            message: "请输入其他业务信息",
            trigger: "blur",
          },
        ],
        publicRelationsFees: [
          {
            required: true,
            message: "请输入公关费用",
            trigger: "blur",
          },
        ],
        biddingFeeNum: [
          {
            required: true,
            message: "请输入招投标费用",
            trigger: "blur",
          },
        ],
        expressFee: [
          {
            required: true,
            message: "请输入快递费",
            trigger: "blur",
          },
        ],
        hospitality: [
          {
            required: true,
            message: "请输入招待费",
            trigger: "blur",
          },
        ],
        projectTotal: [
          {
            required: true,
            message: "请输入小计",
            trigger: "blur",
          },
        ],
        shootingManager: [
          {
            required: true,
            message: "请选择拍摄负责人",
            trigger: "change",
          },
        ],
        postProductionManager: [
          {
            required: true,
            message: "请选择后期负责人",
            trigger: "change",
          },
        ],
        photographer: [
          {
            required: true,
            message: "请选择摄影师",
            trigger: "change",
          },
        ],
        settlementAmount: [
          {
            required: true,
            message: "请输入实际结算金额",
            trigger: "blur",
          },
        ],
        settlementType: [
          {
            required: true,
            message: "请输入结算方式",
            trigger: "blur",
          },
        ],
        isSettlement: [
          {
            required: true,
            message: "请输入是否已结算",
            trigger: "blur",
          },
        ],
        shootingAddress: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur",
          },
        ],
      },
      config: [
        {
          label: "项目名称",
          placeholder: "请输入",
          key: "projectName",
          type: "input",
          // unit: '℃',
          inputType: "text",
          verify: true,
        },
        {
          label: "项目编号",
          placeholder: "请输入",
          key: "projectCode",
          type: "input",
          // unit: '℃',
          inputType: "text",
          verify: true,
        },

        {
          label: "项目开始日期",
          placeholder: "请选择日期",
          key: "startDate",
          type: "date",
          start: "2000-03-01",
          end: "2100-04-01",
          fields: "day",
          verify: true,
        },
        {
          label: "项目结束日期",
          placeholder: "请选择日期",
          key: "endDate",
          type: "date",
          start: "2000-03-01",
          end: "2100-04-01",
          fields: "day",
          verify: true,
        },

        {
          label: "报价金额",
          placeholder: "请输入",
          key: "quotedAmount",
          type: "input",
          unit: "元",
          inputType: "digit",
          verify: true,
        },
        {
          label: "对接人",
          placeholder: "请选择",
          key: "customerId",
          type: "picker",
          options: [
            {
              label: "是",
              value: "1",
            },
            {
              label: "否",
              value: "2",
            },
          ],
          verify: true,
        },
        {
          label: "项目类别",
          placeholder: "请输入",
          key: "projectType",
          type: "input",
          inputType: "text",
          verify: true,
        },
        {
          label: "数量",
          placeholder: "请输入",
          key: "projectNum",
          type: "input",
          inputType: "digit",
          verify: true,
        },
        {
          label: "预计工作量",
          placeholder: "请输入",
          key: "workload",
          type: "input",
          inputType: "text",
          verify: true,
        },
        {
          label: "项目来源",
          placeholder: "请输入",
          key: "source",
          type: "input",
          inputType: "text",
          verify: true,
        },
        {
          label: "其他业务信息",
          placeholder: "请输入其他业务信息",
          key: "projectRemark",
          type: "textarea",
          verify: true,
        },
        {
          label: "公关费用",
          placeholder: "请输入",
          key: "publicRelationsFees",
          type: "input",
          unit: "元",
          inputType: "digit",
          verify: true,
        },
        {
          label: "招投标费用",
          placeholder: "请输入",
          key: "biddingFeeNum",
          type: "input",
          unit: "元",
          inputType: "digit",
          verify: true,
        },
        {
          label: "快递费",
          placeholder: "请输入",
          key: "expressFee",
          type: "input",
          unit: "元",
          inputType: "digit",
          verify: true,
        },
        {
          label: "招待费",
          placeholder: "请输入",
          key: "hospitality",
          type: "input",
          unit: "元",
          inputType: "digit",
          verify: true,
        },
        {
          label: "小计",
          placeholder: "请输入",
          key: "projectTotal",
          type: "input",
          unit: "元",
          inputType: "digit",
          verify: true,
        },
        {
          label: "拍摄负责人",
          placeholder: "请选择",
          key: "shootingManager",
          type: "picker",
          options: [
            {
              label: "是",
              value: "1",
            },
            {
              label: "否",
              value: "2",
            },
          ],
          verify: true,
        },
        {
          label: "后期负责人",
          placeholder: "请选择",
          key: "postProductionManager",
          type: "picker",
          options: [
            {
              label: "是",
              value: "1",
            },
            {
              label: "否",
              value: "2",
            },
          ],
          verify: true,
        },
      ],
      // 摄像Config
      shootingConfigList: [],
      shootingConfig: {
        projectId: null,
        shootingAddress: null,
        shootingTime: null,
        // 拍摄项目
        shootingProject: [],
        // 设备项目
        equipmentProject: [],
        carFare: null,
        mealFee: null,
        costTotal: null,
        materialPosition: null,
      },
      shootingProject: [
        {
          label: "拍摄项目",
          placeholder: "请输入拍摄项目",
          key: "shooting",
          type: "input",
          verify: true,
        },
        {
          label: "工作人员",
          type: "input",
          key: "worker",
          placeholder: "请输入工作人员",
          verify: true,
        },
        {
          label: "数量",
          type: "input",
          key: "shootingNum",
          placeholder: "请输入数量",
          verify: true,
        },
        {
          label: "单位",
          type: "input",
          key: "shootingUnit",
          placeholder: "请输入单位",
          verify: true,
        },
        {
          label: "单价",
          type: "input",
          key: "shootingPrice",
          placeholder: "请输入单价",
          verify: true,
        },
        {
          label: "成本",
          type: "input",
          key: "shootingCost",
          placeholder: "请输入成本",
          verify: true,
        },
      ],
      // 拍摄config 设备项目
      equipmentProject: [
        {
          label: "设备名称",
          placeholder: "请选择设备名称",
          key: "equipment",
          type: "input",
          verify: true,
        },
        {
          label: "工作人员",
          type: "input",
          key: "worker",
          placeholder: "请输入工作人员",
          verify: true,
        },
        {
          label: "数量",
          type: "input",
          key: "shootingNum",
          placeholder: "请输入数量",
          verify: true,
        },
        {
          label: "单位",
          type: "input",
          key: "shootingUnit",
          placeholder: "请输入单位",
          verify: true,
        },
        {
          label: "单价",
          type: "input",
          key: "shootingPrice",
          placeholder: "请输入单价",
          verify: true,
        },
        {
          label: "成本",
          type: "input",
          key: "shootingCost",
          placeholder: "请输入成本",
          verify: true,
        },
      ],
      // 后期config
      postProductionConfig: {
        projectPostProduction: [],
        projectFilms: [],
        projectFilmsDuration: null,
        costSubtotal: null,
        projectId: null,
        costTotal: null,
        filmsDeliveryTime: null,
        filmsPosition: null,
      },
      projectPostProduction: [
        {
          label: "后期制作项目",
          placeholder: "请输入后期制作项目",
          key: "postProduction",
          type: "input",
          verify: true,
        },
        {
          label: "工作人员",
          type: "input",
          key: "worker",
          placeholder: "请输入工作人员",
          verify: true,
        },
        {
          label: "数量",
          type: "input",
          key: "shootingNum",
          placeholder: "请输入数量",
          verify: true,
        },
        {
          label: "单位",
          type: "input",
          key: "shootingUnit",
          placeholder: "请输入单位",
          verify: true,
        },
        {
          label: "单价",
          type: "input",
          key: "shootingPrice",
          placeholder: "请输入单价",
          verify: true,
        },
        {
          label: "成本",
          type: "input",
          key: "shootingCost",
          placeholder: "请输入成本",
          verify: true,
        },
      ],
      projectFilms: [
        {
          label: "成片名称",
          placeholder: "请输入成片名称",
          key: "filmsName",
          type: "input",
          verify: true,
        },
        {
          label: "时长",
          placeholder: "请输入时长",
          key: "filmsDuration",
          type: "input",
          verify: true,
        },
      ],

      // 财务config
      financeConfig: {
        invoiceInfo: [],
        advanceAmount: null,
        projectId: null,
        isSettlement: null,
        receivedAmount: null,
        receivedTime: null,
        settlementAmount: null,
        settlementListPosition: null,
        settlementType: null,
      },

      invoiceInfo: [
        {
          label: "发票号码",
          placeholder: "请输入发票号码",
          key: "invoiceNumber",
          type: "input",
          verify: true,
        },
        {
          label: "开票金额",
          placeholder: "请输入开票金额",
          key: "invoiceAmount",
          type: "input",
          verify: true,
        },
        {
          label: "费用日期",
          placeholder: "请选择日期",
          key: "invoiceTime",
          type: "date",
          start: "2000-03-01",
          end: "2100-04-01",
          fields: "day",
          verify: true,
        },
      ],
      // options 是否
      isSettlementOptions: [
        {
          label: "是",
          value: true,
        },
        {
          label: "否",
          value: false,
        },
      ],
    };
  },
  computed: {},
  watch: {
    formData: {
      deep: true,
      handler(val) {
        console.log("🚀 ~ handler ~ val:", val);
      },
    },
  },
  onLoad({ projectId }) {
    this.projectId = projectId;
    // 设置标题
    uni.setNavigationBarTitle({
      title: projectId ? "编辑项目" : "新增项目",
    });

    this.getCustomerList();
    this.getStaffList();
    this.initFormData();
  },
  onReady() {
    // this.$refs.formRef.setRules(this.rules);
  },
  methods: {
    //初始化表单数据
    initFormData() {
      this.shootingConfig.shootingProject = [this.shootingProject];
      this.shootingConfig.equipmentProject = [this.equipmentProject];
      this.postProductionConfig.projectPostProduction = [
        this.projectPostProduction,
      ];
      this.postProductionConfig.projectFilms = [this.projectFilms];
      this.financeConfig.invoiceInfo = [this.invoiceInfo];
      const shootingConfig = JSON.parse(JSON.stringify(this.shootingConfig));
      this.shootingConfigList.push(shootingConfig);
      const userInfo = uni.getStorageSync("userInfo");
      if (userInfo && userInfo.roleType) {
        switch (userInfo.roleType) {
          case "GENERAL":
            //摄影
            if (userInfo.deptName == "拍摄") {
              this.isEditPhotographer = true;
            } else if (userInfo.deptName == "后期") {
              this.isEditPostProduction = true;
            }
            this.isGeneral = true;
            break;
          case "FINANCIAL":
            //财务
            this.isEditFinance = true;
            break;
          case "SYSTEM_ADMIN":
            this.isAdmin = true;
            break;
          case "PROJECT":
            this.isEditProject = true;
            break;
        }
        if (this.projectId) {
          this.getProjectInfo();
          this.getProjectShooting();
          this.getProjectPostProduction();
          this.getProjectFinancial();
        }
      }
    },

    // 获取拍摄类型列表
    async getShootingTypeList() {
      var res = null;
      try {
        res = await listShootingType();
        let optionList = [];
        res.data.forEach((item) => {
          optionList.push({
            label: item.shootingType,
            value: item.shootingId,
          });
        });

        let newValue = {
          label: "拍摄项目",
          placeholder: "请选择拍摄项目",
          key: "shooting",
          type: "picker",
          options: optionList,
          verify: true,
        };
        this.$set(this.shootingProject, 0, newValue);
      } catch (err) {
        console.log(err);
      }
    },
    //获取设备列表
    async getEquipmentList() {
      var res = null;
      try {
        res = await listEquipment();
        let optionList = [];
        res.data.forEach((item) => {
          optionList.push({
            label: item.eqName,
            value: item.eqId,
          });
        });

        let newValue = {
          label: "设备名称",
          placeholder: "请选择设备名称",
          key: "equipment",
          type: "picker",
          options: optionList,
          verify: true,
        };
        this.$set(this.equipmentProject, 0, newValue);
      } catch (err) {
        console.log(err);
      }
    },

    async getProjectInfo() {
      var res = null;
      // try {
      res = await getProject({
        projectId: this.projectId,
      });
      this.projectInfo = res.data;
      this.formData = {
        ...this.formData,
        ...res.data,
      };
      // } catch (err) {
      //   console.log(err);
      // }
    },
    // 判断对象是否为空对象
    isEmptyObject(obj) {
      return obj && Object.keys(obj).length === 0;
    },
    async getProjectShooting() {
      var res = null;
      // try {
      res = await getProjectShooting({
        projectId: this.projectId,
      });
      this.shootingInfo = res.data;
      if (res.data) {
        const shootingConfig = JSON.parse(JSON.stringify(this.shootingConfig));

        res.data.map((item, index) => {
          if (index > 0) {
            this.shootingConfigList.push(shootingConfig);
          }

          const keyList = Object.keys(item);
          keyList.map((key) => {
            if (["shootingProject", "equipmentProject"].includes(key)) {
              this.shootingConfigList[index][key] = item?.[key];
              const keyList2 = this[key].map((item2) => item2.key);
              item?.[key].map((twoLevel, twoLevelIndex) => {
                keyList2.map((twoLevelKey) => {
                  this.formData[
                    `shootingConfig${index}_${key}_${twoLevelKey}${twoLevelIndex}`
                  ] = item[key][twoLevelIndex][twoLevelKey];
                });
              });
            } else {
              this.shootingConfigList[index][key] = item?.[key];
              this.formData[`shootingConfig${index}_${key}`] = item?.[key];
            }
          });
        });
        if (
          !this.shootingConfig?.shootingProject ||
          this.financeConfig?.shootingProject?.length === 0
        ) {
          this.shootingConfig.shootingProject = [this.shootingProject];
        }
        if (
          !this.shootingConfig?.equipmentProject ||
          this.financeConfig?.equipmentProject?.length === 0
        ) {
          this.shootingConfig.equipmentProject = [this.equipmentProject];
        }
      }
      // } catch (err) {
      //   console.log(err);
      // }
    },

    async getProjectPostProduction() {
      var res = null;
      res = await getProjectPostProduction({
        projectId: this.projectId,
      });
      const data = res?.data?.[0];
      if (data && data?.projectPostProduction) {
        this.postProductionInfo = data;
        const keyList = Object.keys(this.postProductionConfig);
        keyList.map((key) => {
          if (["projectPostProduction", "projectFilms"].includes(key)) {
            this.postProductionConfig[key] = data?.[key];

            const keyList2 = this[key]?.map((item2) => item2.key);
            data?.[key]?.map((twoLevel, twoLevelIndex) => {
              keyList2?.map((twoLevelKey) => {
                this.formData[`${key}_${twoLevelKey}${twoLevelIndex}`] =
                  data?.[key]?.[twoLevelIndex]?.[twoLevelKey];
              });
            });
          } else {
            this.postProductionConfig[key] = data?.[key];
            this.formData[`${key}`] = data?.[key];
          }
        });
      }

      if (
        !this.postProductionConfig?.projectPostProduction ||
        this.postProductionConfig?.projectPostProduction?.length === 0
      ) {
        this.postProductionConfig.projectPostProduction = [
          this.projectPostProduction,
        ];
      }
      if (
        !this.postProductionConfig?.projectFilms ||
        this.postProductionConfig?.projectFilms?.length === 0
      ) {
        this.postProductionConfig.projectFilms = [this.projectFilms];
      }

      // } catch (err) {
      //   console.log(err);
      // }
    },

    async getProjectFinancial() {
      var res = null;
      try {
        res = await getProjectFinancial({
          projectId: this.projectId,
        });
        this.financeInfo = res.data;
        if (res.data) {
          const data = res.data;
          const keyList = Object.keys(this.financeConfig);
          keyList.map((key) => {
            if (key === "invoiceInfo") {
              this.financeConfig[key] = data?.[key];
              const keyList2 = this[key].map((item2) => item2.key);
              data?.[key].map((twoLevel, twoLevelIndex) => {
                keyList2.map((twoLevelKey) => {
                  this.formData[`${key}_${twoLevelKey}${twoLevelIndex}`] =
                    data[key][twoLevelIndex][twoLevelKey];
                });
              });
            } else {
              this.financeConfig[key] = data?.[key];
              this.formData[`${key}`] = data?.[key];
            }
          });

          if (
            !this.financeConfig?.invoiceInfo ||
            this.financeConfig?.invoiceInfo?.length === 0
          ) {
            this.financeConfig.invoiceInfo = [this.invoiceInfo];
          }
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 保存财务信息
    async saveProjectFinancial(val) {
      const {
        advanceAmount,
        isSettlement,
        receivedAmount,
        receivedTime,
        settlementAmount,
        settlementListPosition,
        settlementType,
      } = this.formData;
      const invoiceInfo = this.handleListData("financeConfig", "invoiceInfo");
      let params = {
        projectId: this.projectId,
        advanceAmount,
        invoiceInfo,
        isSettlement,
        receivedAmount,
        receivedTime,
        settlementAmount,
        settlementListPosition,
        settlementType,
      };

      if (!params.settlementAmount) {
        return uni.showToast({
          title: "请输入实际结算金额",
          icon: "none",
        });
      }
      if (!params.settlementType) {
        return uni.showToast({
          title: "请输入结算方式",
          icon: "none",
        });
      }
      if (!params.isSettlement) {
        return uni.showToast({
          title: "请填写是否已结算",
          icon: "none",
        });
      }
      if (!params.isSettlement) {
        return uni.showToast({
          title: "请填写是否已结算",
          icon: "none",
        });
      }
      if (params.invoiceInfo) {
        let valid = true;
        params.invoiceInfo?.forEach((item) => {
          const a = this.validate(item, this.invoiceInfo);
          if (!a) {
            valid = false;
            return;
          }
        });
        if (!valid) {
          return false;
        }
      }
      if (!params.advanceAmount) {
        return uni.showToast({
          title: "请输入预存金额",
          icon: "none",
        });
      }
      if (!params.receivedAmount) {
        return uni.showToast({
          title: "请输入到账金额",
          icon: "none",
        });
      }
      if (!params.receivedTime) {
        return uni.showToast({
          title: "请输入到账时间",
          icon: "none",
        });
      }
      if (!params.settlementListPosition) {
        return uni.showToast({
          title: "请输入结算清单存放位置",
          icon: "none",
        });
      }
      if (this.projectId) {
        await updateProjectFinancial({
          params,
        });
      } else {
        await saveProjectFinancial({
          params,
        });
      }
      this.back();
    },
    // 保存后期制作信息
    async saveProjectPostProduction(val) {
      const { costSubtotal, costTotal, filmsDeliveryTime, filmsPosition } =
        this.formData;
      const projectFilms = this.handleListData(
        "postProductionConfig",
        "projectFilms"
      );
      const projectPostProduction = this.handleListData(
        "postProductionConfig",
        "projectPostProduction"
      );
      let params = {
        projectId: this.projectId,
        costSubtotal,
        costTotal,
        filmsDeliveryTime,
        filmsPosition,
        projectFilms,
        projectPostProduction,
      };
      if (params.projectPostProduction) {
        let valid = true;
        params.projectPostProduction?.forEach((item) => {
          const a = this.validate(item, this.projectPostProduction);
          if (!a) {
            valid = false;
            return;
          }
        });
        if (!valid) {
          return false;
        }
      }
      if (!params.costSubtotal) {
        return uni.showToast({
          icon: "none",
          title: "请填写后期制作成本小计",
        });
      }
      if (params.projectFilms) {
        let valid = true;
        params.projectFilms?.forEach((item) => {
          const a = this.validate(item, this.projectFilms);
          if (!a) {
            valid = false;
            return;
          }
        });
        if (!valid) {
          return false;
        }
      }

      if (!params.filmsPosition) {
        return uni.showToast({
          icon: "none",
          title: "请填写成片入库位置",
        });
      }

      if (!params.filmsDeliveryTime) {
        return uni.showToast({
          icon: "none",
          title: "请填写成片交付时间",
        });
      }

      if (!params.costTotal) {
        return uni.showToast({
          icon: "none",
          title: "请填写后期成本合计",
        });
      }
      await saveProjectPostProduction({
        params,
      });
      this.back();
    },
    // 返回上一页
    back() {
      uni.showToast({
        title: "保存成功",
        icon: "success",
        duration: 2000,
      });
      uni.reLaunch({
        url: "/pages/projectManager/projectManager",
      });
    },

    // 更新表单数据
    updateValue(val) {
      this.formData = val;
    },

    async getCustomerList() {
      uni.showLoading({
        title: "请稍等...",
      });
      let that = this;
      var res = null;
      try {
        res = await listCustomer({
          data: {},
        });
        this.customerList = res.data;

        let optionList = [];
        this.customerList.forEach((item) => {
          optionList.push({
            label: item.company + "-" + item.customerName,
            value: item.customerId,
          });
        });

        let newValue = {
          label: "对接人",
          placeholder: "请选择",
          key: "customerId",
          type: "picker",
          options: optionList,
          verify: true,
        };

        this.$set(this.config, 5, newValue);
      } catch (err) {
        console.log(err);
      } finally {
        uni.hideLoading();
      }
    },

    async getStaffList() {
      uni.showLoading({
        title: "请稍等...",
      });
      let that = this;
      var res = null;
      try {
        res = await pageWxUserInfo({
          params: {
            roleType: "GENERAL",
          },
          page: {
            pageNum: 1,
            pageSize: 100,
          },
        });
        this.userData = res.data.list;

        let optionList = [];
        this.userData.forEach((item) => {
          optionList.push({
            label: item.deptName + "-" + item.userName,
            value: item.wxUserId,
          });
        });
        const newValueOption = optionList.filter((item) => {
          return item.label.includes("拍摄");
        });

        let newValue = {
          label: "拍摄负责人",
          placeholder: "请选择",
          key: "shootingManager",
          type: "picker",
          options: newValueOption,
          verify: true,
        };

        const optionList2 = optionList.filter((item) => {
          return item.label.includes("后期");
        });
        let newValue2 = {
          label: "后期负责人",
          placeholder: "请选择",
          key: "postProductionManager",
          type: "picker",
          options: optionList2,
          verify: true,
        };

        this.$set(this.config, 16, newValue);
        this.$set(this.config, 17, newValue2);
      } catch (err) {
        console.log(err);
      } finally {
        uni.hideLoading();
      }
    },
    // 获取label名称
    getLabel(options, key) {
      const value = this.formData[key];
      if (value === null || value === undefined || value === "") {
        return "";
      } else {
        let label = options.reduce((val, item) => {
          value === item.value && (val = item.label);
          return val;
        }, "");
        return label;
      }
    },
    pickerChange(e) {
      this.formData[e.currentTarget.dataset.key] =
        e.currentTarget.dataset.options[e.detail.value].value;
      this.$forceUpdate();
    },
    // 提交数据
    submit(val) {
      console.log(val);
      console.log(this.formData);
    },

    // 图片/视频上传
    uploadMedia(e) {
      // 如果isPostProduction要进行深拷贝
      const data = JSON.parse(JSON.stringify(this.formData));
      data[e.key] = e.tempFiles[0].tempFilePath;
      this.formData = JSON.parse(JSON.stringify(data));

      /* 如果定义了formData: {images: ''}，则不需要进行深拷贝
			this.formData[e.key] = e.tempFiles[0].tempFilePath
			*/
    },

    // 多图上传
    uploadPicture(e) {
      // 如果 在formData中没有定义该字段，则需要进行深拷贝
      const data = JSON.parse(JSON.stringify(this.formData));
      if (data[e.key] && data[e.key].length) {
        data[e.key] = [...data[e.key], e.tempFiles[0].tempFilePath];
      } else {
        data[e.key] = [e.tempFiles[0].tempFilePath];
      }
      this.formData = JSON.parse(JSON.stringify(data));
      /* 如果定义了formData: {images: ''}，则不需要进行深拷贝
			this.formData[e.key] = [...this.formData[e.key], ...e.tempFiles[0].tempFilePath]
			*/
    },
    findIndex(options, key) {
      let index = options.reduce((val, item, index) => {
        if (item.value === this.formData[key]) {
          val = index;
        }
        return val;
      }, 0);
      return index;
    },
    // 新增拍摄项目
    addShootingConfig() {
      const shootingConfig = JSON.parse(JSON.stringify(this.shootingConfig));
      this.shootingConfigList.push(shootingConfig);
    },
    // 删除拍摄项目
    deleteShootingConfig(index) {
      this.shootingConfig.splice(index, 1);
    },
    // 新增模块
    addModule(moduleName, littleModuleName, moduleIndex) {
      if (moduleIndex !== undefined) {
        this[moduleName][moduleIndex][littleModuleName].push(
          this[littleModuleName]
        );
      } else {
        this[moduleName]?.[littleModuleName]?.push(this[littleModuleName]);
      }
    },
    // 删除模块
    deleteModule(moduleName, moduleIndex, littleModuleName, index) {
      if (moduleIndex) {
        this[moduleName][moduleIndex][littleModuleName].splice(index, 1);
      } else {
        this[moduleName][littleModuleName].splice(index, 1);
      }
    },
    // 处理list数据
    handleListData(listName, keyName) {
      const keyList = this[keyName]?.map((item) => item.key);
      const data = this[listName][keyName]?.map((item, index) => {
        let itemData = {};
        keyList?.map((key) => {
          itemData[key] = this.formData[`${keyName}_${key}${index}`];
        });
        return itemData;
      });
      return data;
    },

    // 保存拍摄
    async saveShooting() {
      const keys = Object.keys(this.shootingConfig);
      let isSubmit = true;
      const data = this.shootingConfigList.map((oneLevel, oneLevelIndex) => {
        const itemData = {};
        keys.map((key) => {
          if (["shootingProject", "equipmentProject"].includes(key)) {
            const keyList = this[key].map((item2) => item2.key);
            const itemListData = oneLevel[key].map(
              (twoLevel, twoLevelIndex) => {
                let itemData1 = {};
                keyList.map((twoLevelKey) => {
                  itemData1[twoLevelKey] =
                    this.formData[
                      `shootingConfig${oneLevelIndex}_${key}_${twoLevelKey}${twoLevelIndex}`
                    ];
                });
                return itemData1;
              }
            );
            itemData[key] = itemListData;
            if (key === "shootingProject") {
              let valid = true;
              itemData[key]?.map((item) => {
                valid = this.validate(item, this.shootingProject);
                return;
              });
              if (!valid) {
                isSubmit = valid;
                return valid;
              }
            }
            if (key === "equipmentProject") {
              let valid = true;
              itemData[key]?.map((item) => {
                valid = this.validate(item, this.equipmentProject);
                return;
              });
              if (!valid) {
                isSubmit = valid;
                return valid;
              }
            }
          } else {
            itemData[key] =
              this.formData[`shootingConfig${oneLevelIndex}_${key}`];

            if (
              !this.formData[`shootingConfig${oneLevelIndex}_shootingAddress`]
            ) {
              isSubmit = false;
              return uni.showToast({
                icon: "none",
                title: `拍摄地点不能为空`,
              });
            }
            if (!this.formData[`shootingConfig${oneLevelIndex}_shootingTime`]) {
              isSubmit = false;
              return uni.showToast({
                icon: "none",
                title: `拍摄时间不能为空`,
              });
            }
            if (!this.formData[`shootingConfig${oneLevelIndex}_carFare`]) {
              isSubmit = false;
              return uni.showToast({
                icon: "none",
                title: `交通运输费用不能为空`,
              });
            }
            if (!this.formData[`shootingConfig${oneLevelIndex}_mealFee`]) {
              isSubmit = false;
              return uni.showToast({
                icon: "none",
                title: `餐费不能为空`,
              });
            }
            if (!this.formData[`shootingConfig${oneLevelIndex}_costTotal`]) {
              isSubmit = false;
              return uni.showToast({
                icon: "none",
                title: `成本小计不能为空`,
              });
            }
            if (
              !this.formData[`shootingConfig${oneLevelIndex}_materialPosition`]
            ) {
              isSubmit = false;
              return uni.showToast({
                icon: "none",
                title: `素材入库位置不能为空`,
              });
            }
          }
        });
        if (this.projectId) {
          itemData.projectId = this.projectId;
        }
        return itemData;
      });
      if (!isSubmit) {
        return;
      }
      const params = data;
      try {
        await batchSaveProjectShooting({
          params,
        });
        this.back();
      } catch (err) {}
    },
    // 删除拍摄
    deleteShooting(projectId) {
      try {
        delProjectShooting(projectId);
      } catch (err) {}
    },
    validate(params, valiInfo) {
      for (const key in params) {
        const valiItem = valiInfo.find((item) => item.key === key);
        if (valiItem?.verify && !params[key]) {
          uni.showToast({
            icon: "none",
            title: `${valiItem.label}不能为空`,
          });
          return false;
        }
      }

      return true;
    },
    // 保存项目
    async saveProject() {
      const {
        biddingFeeNum,
        customerId,
        endDate,
        expressFee,
        hospitality,
        postProductionManager,
        projectCode,
        projectName,
        projectNum,
        projectRemark,
        projectTotal,
        projectType,
        publicRelationsFees,
        quotedAmount,
        shootingManager,
        source,
        startDate,
        workload,
      } = this.formData;
      const params = {
        projectId: this.projectId,
        projectName,
        projectCode,
        startDate,
        endDate,
        quotedAmount,
        customerId,
        projectType,
        projectNum,
        workload,
        source,
        projectRemark,
        publicRelationsFees,
        biddingFeeNum,
        expressFee,
        hospitality,
        projectTotal,
        shootingManager,
        postProductionManager,
      };
      const valid = this.validate(params, this.config);
      if (!valid) return;
      try {
        if (this.projectId) {
          await updateProject({
            params,
          });
        } else {
          await saveProject({
            params,
          });
        }
      } catch (err) {}
    },
    save() {
      if (this.isEditProject) {
        this.saveProject();
      }
      if (this.isEditPhotographer) {
        this.saveShooting();
      }
      if (this.isEditPostProduction) {
        this.saveProjectPostProduction();
      }
      if (this.isEditFinance) {
        this.saveProjectFinancial();
      }
    },
    setConfig(config, index) {
      config.forEach((item) => {
        item.key = `${item.key}_${index}`;
      });
      return config;
    },
    dateChange(e) {
      this.formData[e.currentTarget.dataset.key] = e.detail.value;
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  width: 100%;
  font-size: 30rpx;
  font-weight: bold;
  padding: 32rpx;
  background: #f5f5f5;
}

.divider {
  background: #f5f5f5;
  height: 20rpx;
}

.form-title {
  background: #f5f5f5;
}

.content {
  width: 100%;

  ::v-deep .uni-input-wrapper {
    font-size: 13px;
  }

  ::v-deep .uni-picker-view {
    font-size: 13px;
  }

  ::v-deep .uni-textarea-wrapper {
    font-size: 13px;
  }

  .uni-input {
    &.placeholder {
      color: rgb(192, 196, 204);
    }
  }
}

.sub-title {
  text-align: center;
  background: #f5f5f5;
  padding: 12rpx 0;
}

.add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 0 32rpx;
  background: #f5f5f5;
  width: 100%;
  box-sizing: border-box;

  .u-icon {
    padding: 0 8rpx;
  }
}

.shooting-form {
  background: #fff;
}

.items {
  width: 100%;
  height: 104rpx;
  padding: 0 32rpx;
  background: #ffffff;
  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #eeeeef;
  box-sizing: border-box;
}

.fixed-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 204rpx;
  width: 100%;
  box-sizing: content-box;
  background: #ffffff;
  box-shadow: 0px -8rpx 20rpx 0px rgba(0, 0, 0, 0.06);
  z-index: 200;

  .content-box {
    width: 100%;
    padding: 32rpx;
    box-sizing: border-box;

    .btn {
      width: 100%;
    }
  }
}
</style>
